<template>
  <div class="home-page">
    <div class="hero-section">
      <h1>一起读书</h1>
      <p>分享知识，连接思想，一起成长</p>
      <div class="search-box">
        <input v-model="searchQuery" @input="debouncedSearch" placeholder="搜索书名或作者...">
      </div>
    </div>

    <div class="featured-books" v-if="!loading && books.length > 0">
      <h2>精选图书</h2>
      <div class="book-grid">
        <div v-for="book in books.slice(0, 6)" :key="book.id" class="book-card">
          <img :src="book.coverUrl" :alt="book.title" class="book-cover">
          <div class="book-info">
            <h3>{{ book.title }}</h3>
            <p>{{ book.author }}</p>
            <router-link :to="'/book/' + book.id" class="details-link">查看详情</router-link>
          </div>
        </div>
      </div>
    </div>

    <div class="loading" v-if="loading">正在加载图书...</div>
    <div class="no-results" v-if="!loading && books.length === 0">没有找到匹配的图书</div>

    <div class="pagination" v-if="totalPages > 1">
      <button @click="changePage(currentPage - 1)" :disabled="currentPage === 0">上一页</button>
      <span>第 {{ currentPage + 1 }} 页 / 共 {{ totalPages }} 页</span>
      <button @click="changePage(currentPage + 1)" :disabled="currentPage === totalPages - 1">下一页</button>
    </div>

    <!-- 在分页控件后添加以下内容 -->
    <div class="cta-section">
      <h2>加入我们的读书社区</h2>
      <p>分享你的阅读心得，参与精彩讨论，结识志同道合的朋友</p>
      <router-link to="/add" class="cta-button">贡献图书</router-link>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import debounce from 'lodash.debounce'

export default {
  name: 'BookList',
  data() {
    return {
      searchQuery: '',
      loading: true
    }
  },
  computed: {
    ...mapState(['books', 'totalElements', 'currentPage', 'totalPages', 'pageSize'])
  },
  methods: {
    ...mapActions(['fetchBooks']),
    async search() {
      console.log('Searching with query:', this.searchQuery)
      this.loading = true
      try {
        await this.fetchBooks({ page: 0, query: this.searchQuery, size: this.pageSize })
        console.log('Books after search:', this.books)
      } catch (error) {
        console.error('Error searching books:', error)
      } finally {
        this.loading = false
      }
    },
    debouncedSearch: debounce(function() {
      this.search()
    }, 300),
    async changePage(page) {
      if (page >= 0 && page < this.totalPages) {
        this.loading = true
        try {
          await this.fetchBooks({ page, query: this.searchQuery })
        } catch (error) {
          console.error('Error changing page:', error)
        } finally {
          this.loading = false
        }
      }
    }
  },
  async created() {
    console.log('BookList component created')
    this.loading = true
    try {
      await this.fetchBooks({ page: 0 })
      console.log('Initial books:', this.books)
      console.log('Total elements:', this.totalElements)
      console.log('Current page:', this.currentPage)
      console.log('Total pages:', this.totalPages)
    } catch (error) {
      console.error('Error in BookList created:', error)
    } finally {
      this.loading = false
    }
  }
}
</script>

<style scoped>
.home-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.hero-section {
  text-align: center;
  padding: 60px 0;
  background-color: #f0f4f8;
  border-radius: 10px;
  margin-bottom: 40px;
}

.hero-section h1 {
  font-size: 3em;
  color: #2c3e50;
  margin-bottom: 10px;
}

.hero-section p {
  font-size: 1.2em;
  color: #34495e;
  margin-bottom: 30px;
}

.search-box {
  display: flex;
  justify-content: center;
  max-width: 600px;
  margin: 0 auto;
}

.search-box input {
  width: 100%;
  padding: 10px 15px;
  font-size: 1.1em;
  border: 2px solid #3498db;
  border-radius: 5px;
}

.featured-books {
  margin-bottom: 40px;
}

.featured-books h2 {
  font-size: 2em;
  color: #2c3e50;
  margin-bottom: 20px;
}

.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.book-card {
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  overflow: hidden;
  transition: transform 0.3s;
}

.book-card:hover {
  transform: translateY(-5px);
}

.book-cover {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.book-info {
  padding: 15px;
}

.book-info h3 {
  font-size: 1.2em;
  margin-bottom: 5px;
}

.book-info p {
  color: #7f8c8d;
  margin-bottom: 10px;
}

.details-link {
  display: inline-block;
  color: #3498db;
  text-decoration: none;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.pagination button, .pagination span {
  margin: 0 10px;
}

.contribute-button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 1.1em;
  background-color: #27ae60;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.contribute-button:hover {
  background-color: #2ecc71;
}

/* 移除原来的 CTA 部分样式 */

.cta-section {
  text-align: center;
  padding: 60px 0;
  background-color: #ecf0f1;
  border-radius: 10px;
  margin-top: 40px;
}

.cta-section h2 {
  font-size: 2em;
  color: #2c3e50;
  margin-bottom: 10px;
}

.cta-section p {
  font-size: 1.2em;
  color: #34495e;
  margin-bottom: 30px;
}

.cta-button {
  display: inline-block;
  padding: 15px 30px;
  font-size: 1.2em;
  background-color: #27ae60;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.cta-button:hover {
  background-color: #2ecc71;
}
</style>